/* Grille.css */ /* Reset et base */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; /* color: brown;*/ background-color: white; /* couleur ddu fond de page */ margin: 10px;/**/ max-width: 1600px; /* largeur max*/ margin: 10px auto; } /* Système de grille principal */ .grid-container { display: grid; gap: 20px; padding: 0px 20px 20px 20px; /*padding: 20px 0;*/ } /* Classes de grille sémantiques */ .grid-row-2 { grid-template-columns: 1fr 3fr; } .grid-row-3 { grid-template-columns: repeat(3, 1fr); } .grid-row-4 { grid-template-columns: repeat(4, 1fr); } .grid-row-half { grid-template-columns: repeat(2, 1fr); } .grid-row-1 { grid-template-columns: repeat(1, 1fr); } /* Blocs de contenu */ .grid-item { background: rgba(233, 238, 226, 0.904); /* couleur du fond des grilles */ /* a modifier en prod*/ padding: 5px 10px 0px 10px; /* marge intérieur du bloc*/ border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } /* Typographie /* Listes */ /* Style des listes */ ul { margin: 3px 0; /* Décalage à gauche */ line-height: 1.0; /* Lignes très serrées */ } li { font-weight: 600; /* Police en gras */ margin-bottom: 10px; /* Espacement réduit entre les éléments */ } .list-mod1 { margin: 3px 0; padding-left: 80px; /* Décalage à gauche */ line-height: 1.2; /* Lignes très serrées */ } .list-mod1 li { font-weight: 600; /* Police en gras */ margin-bottom: 4px; /* Espacement réduit entre les éléments */ } /* Responsive */ @media (max-width: 768px) { .list-mod1 { padding-left: 20px; /* Décalage légèrement réduit sur mobile */ } } /* social icon réseaux sociaux */ .social-icons { /* centrage des icones*/ display: flex; justify-content: center; } .zoom { font-size: 110%; } .zoom120 { font-size: 120%; } .reduc-img-60 { width: 60%; height: auto; display: block; margin: 0 auto; padding-bottom: 10px; } .reduc80 { font-size: 80%; } .text-center { text-align: center; } .section-center { align-items: center; } /* marges padding espaces Aligner les éléments par rapport à l’axe de ligne horizontal ou les colonnes vertical */ /* padding */ .pt-3 { padding-top: 3rem !important; } .pt-50 { margin: 50px 0; } .pl-3 { padding-left: 3rem !important; } .pl-5 { padding-left: 5rem !important; } .pt-3 { padding: 3rem !important; } .pl-5 { padding: 3rem !important; } .px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } .pxy { padding: 5px; } /* padding */ /* Marges */ .mt-1 { margin-top: 1rem !important; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem !important; } .mb-1 { margin-bottom: 1rem !important; } .mb-2 { margin-bottom: 2rem !important; } .mb-3 { margin-bottom: 3rem !important; } .ml-1 { margin-left: 1rem !important; } .ml-2 { margin-left: 2rem !important; } .ml-3 { margin-left: 3rem !important; } /* / Marges */ /* Citation */ .modern-quote { position: relative; font-size: 1.1rem; line-height: 1.6; color: #3498db; /* Bleu pour la citation */ margin: 1.5rem 0.5rem 0rem 3.5rem;/* déclage du bloc à droite*/ padding: 0.7rem 1.5rem; border-left: 4px solid #3498db; background: #f9f9f9; border-radius: 0 5px 5px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); max-width: 100%; box-sizing: border-box; } .modern-quote footer { margin-top: 0.8em; text-align: right; } .modern-quote cite { font-style: italic; font-weight: normal; color: #3498db; /* Bleu pour l'auteur */ font-size: 0.9em; } /* Responsive: s'adapte à la taille de l'écran */ @media (max-width: 600px) { .modern-quote { padding: 0.8em 1em; font-size: 1em; } } /* Responsive: adaptation pour petits écrans */ @media (max-width: 600px) { blockquote { font-size: 1rem; padding: 1rem; } blockquote::before, blockquote::after { font-size: 2rem; } } /* Fil d'ariane */ .breadcrumb { padding: 15px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .breadcrumb a { text-decoration: none; color: #3498db; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb-separator { color: #999; } /* .social-menu { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #555; } .social-icon { width: 40px; height: 40px; background: #555; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; color: white; transition: background 0.3s; } .social-icon:hover { background: #3498db; } */ /* Footer */ .footer { background-color: #e5ebda; color: white; padding: 1px 20px 20px; border-radius: 10px; margin-top: 5px; } .footer-content { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .footer-links a { display: block;/* color: white;*/ font-size: 1.2rem; text-decoration: none; margin-bottom: 0px; } .footer-links a:hover { color: #3498db; } .footer-legal { display: flex; flex-direction: column; gap: 10px; } .footer-legal span { display: flex;/* align-items: center;*/ gap: 8px; } /* Responsive Design telephone */ @media (max-width: 768px) { body { margin: 5px; } .hamburger { display: flex; } .nav-menu { display: none; } .grid-container { grid-template-columns: 1fr !important; gap: 15px; padding: 15px 0; } .grid-item { padding: 15px; } .header { padding: 10px 15px; } .footer-content { grid-template-columns: 1fr; gap: 20px; } .social-menu { flex-wrap: wrap; gap: 15px; } .breadcrumb { font-size: 14px; } .reduc-img-60 { width: 100%; } } @media (min-width: 769px) and (max-width: 1024px) { .grid-row-4 { grid-template-columns: repeat(2, 1fr); } } /* ************* / Grille.css ******************** */ /* ************* Css\Typographie ******************** */ .main-content { /*décale le h1 sous le menu*/ padding-top: 10px; /* Espace vertical sous le menu padding-top: 80px;*/ } /* Typographie */ h1 { line-height: 1.3; font-size: 2.5rem; margin-bottom:0; color: brown;text-align: center; } h2 { line-height: 1.3; font-size: 1.75rem; margin-bottom: 0.275rem; color: brown; } h3 { line-height: 1.3; font-size: 1.5rem; margin-bottom: 0.25rem; color: brown; } h4 { line-height: 1.3; font-size: 1.25rem; margin-bottom: 0.225rem; margin-top: 0.925rem; color: brown; }/* margin top rajout*/ h5 { line-height: 1.3; font-size: 1.1rem; margin-bottom: 0.25rem; color: brown; } /**/ /* titre accordion reduc taille */ .H3accordion{ font-size: 1.2rem; font-weight: 700;} /* Typographie sur 2 lignes */ h1 span { /* Style de la deuxième ligne (le span) */ margin-bottom: 1.8rem; font-style: italic; display: block; /* Force le span à aller à la ligne */ font-size: 1.4rem; /* Rendre la police plus petite */ font-weight: 700; /* Rendre la police moins grasse pour la distinguer */ color: brown; /* Une couleur plus claire pour le sous-titre */ /* margin-top: 0.002rem; Ajoute un petit espace entre les deux lignes */} /* span Typographie sur 1 lignes */ h2 span { line-height: 0.9; font-size: 1.2rem; font-style: italic; margin-bottom: 1.275rem; color: brown; font-weight: 500; } h3 span { line-height: 0.9; font-size: 1.3rem; font-style: italic; margin-bottom: 1.25rem; color: brown;font-weight: 500; } h4 span { line-height: 0.9; font-size: 1.1rem; font-style: italic; margin-bottom: 1.25rem; color: brown;font-weight: 500; } /* / span Typographie sur 1 lignes */ /* span Typographie sur 2 lignes */ .cr2 { display: block; } .cr3 { display: block; } .cr4 { display: block; } /* / spanTypographie sur 2 lignes */ /* ************* / rajouts Css\Typo_ Utilisez justify-content: center; pour centrer horizontalement Utilisez align-items: center; pour centrer verticalement le contenu. ******************** */ /* Des styles pour le paragraphe, pas de positionnement nécessaire */ /* agit toutes les balises p */ p { margin-top: 0.1rem; margin-bottom: 0.6rem; font-weight: 600; line-height: 1.3;} p.center { font-size: 1.1rem; text-align: center; /* display: flex; justify-content: center; pour centrer horizontalement */ /* align-items: center; centrer verticalement le contenu.*/ /* margin: auto; Centrage horizontalement marche pas */ } p.model2 { margin-left: 5rem; font-weight: 600; text-align: left; } p.citation { font-weight: 700; margin: 0px 0px 5px 0px; /* Espace entre les paragraphes */ } /* ************* / rajouts Css\Typo_claude.css ******************** */ .section-centree {/*centre les objets d'une box*/ display: flex; justify-content: center; height: 100vh; /* Prend toute la hauteur de la fenêtre */ text-align: center; border: 1px solid #ccc; /* Juste pour visualiser la section */ padding: 0px; box-sizing: border-box; } /* Listes ul, ol, dl { margin-bottom: 1rem; padding-left: 20px; } li { margin-bottom: 0.5rem; } dt { font-weight: bold; margin-top: 0.5rem; font-size: 18px } dd { font-weight: 600; margin-left: 20px; margin-bottom: 0.2rem; } */ /* ************* Listes_dl.css ******************** */ /* Listes responsives */ ul { margin: 1rem 0rem rem 0; padding-left: 2rem; } ul li { font-size: clamp(0.9rem, 2vw, 1rem); margin-bottom: 0.5rem; position: relative; } ul li::marker { color: #667eea; } /* Liste de définition */ dl { margin: 0.3rem 0; background: #f8f9fa; border-radius: 10px; padding: 1.5rem; } dt { font-weight: 700; color: #2c3e50; font-size: clamp(1.2rem, 2.5vw, 1.3rem); margin-top: 1rem; margin-bottom: 0.5rem; } dt:first-child { margin-top: 0; } dd { font-weight: 600; margin-bottom: 0.8rem; /* Réduit l'espace en bas */ margin-top: 0.5rem; /* Réduit aussi l'espace en haut si nécessaire */ margin-left: 1.5rem; font-size: clamp(0.9rem, 2vw, 1rem); color: #555; border-left: 3px solid #667eea; padding-left: 0.8rem; line-height: 1.1; /* Réduit l'interligne */ } /* ************* / Listes_dl.css ******************** */ /* ************* Css\image_Lazy_1.css******************** */ /* * { box-sizing: border-box; } body { margin: 0; padding: 2rem; font-family: sans-serif; background-color: #f4f4f4; } */ .image-container { position: relative; max-width: 600px; margin: auto; overflow: hidden; border-radius: 15px;/* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);/*ombrage */ } .image-container img { width: 100%; height: auto;/*decale la légende display: block;*/ border-radius: 15px; transition: transform 0.4s ease; border: 0.5px solid rgb(6, 1, 1); box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.38); } .image-container:hover img { transform: scale(1.03); } .caption { border-radius: 15px; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 0.2rem;/* padding: 1rem;*/ text-align: center; opacity: 0; transform: translateY(100%); transition: opacity 0.4s ease, transform 0.4s ease; } .image-container:hover .caption { opacity: 1; transform: translateY(0); } /* Responsive tweaks (facultatif, car img est déjà responsive) Telephone */ @media (max-width: 768px) { /* claude pour telephon */ h1 { font-size: 2.0rem; } h2 { font-size: 1.7rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.2rem; } h5 { font-size: 0.7rem; } h1 span { font-size: 1.4rem; } h2 span { font-size: 1.3rem; } h3 span { font-size: 1.2rem; } h4 span { font-size: 1.1rem; } h5 span { font-size: 1.1rem; } .caption { font-size: 0.9rem; padding: 0.8rem; } } @media (max-width: 480px) { .caption { font-size: 0.8rem; padding: 0.6rem; } } /* Image responsive */ .responsive-image { width: 100%; height: auto; border-radius: 5px; margin-bottom: 10px; } .image-caption { font-style: italic; color: #666; text-align: center; font-size: 14px; } /* rajouts espace verticale entre images */ .image-container img { width: 100%; height: auto; border-radius: 15px; transition: transform 0.4s ease; border: 0.5px solid rgb(6, 1, 1); box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.38); display: block; margin-bottom: 1rem; /* Espacement par défaut pour mobile */ } /* Tablette (portrait et paysage) */ @media (min-width: 600px) { .image-container img { margin-bottom: 1.5rem; } } /* Ordinateur */ @media (min-width: 992px) { .image-container img { margin-bottom: 2rem; } } /* / rajouts espace verticale entre images */ /*<a href="Photos/Aikido/1200/Aikido-Bourg-01-10.JPG" target="_blank" class="image-container"><img src="Photos/Aikido/250/Aikido-Bourg-01-10.webp" loading="lazy" alt="Description de l'image"><div class="caption">Ceci est une légende d'image apparaissant au survol</div></a>*/ /* ************* / Css\image_Lazy_1.css******************** */ /* ************* Accordions-4.css ******************** */ /* body { font-family: Arial, sans-serif; background-color: #f5f5f5; padding: 10px; } */ .accordion-container { width: 95%; max-width: 90%; margin: 0 auto; } details { background-color: white;/* Fond blanc du contenu*/ margin: 10px 10px 10px 20px; /* marge haut/droite/bas = 10px, gauche = 20px */ border-bottom: 1px solid #e0efb4; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;/* ombrage*/ } summary { background-color: #d7edd6;/* Fond vert clair */ font-size: 19px; /*hauteur du titre*/ /* Hauteur minimale + centrage vertical */ min-height: 10px;/* hauteur du vert*/ padding: 10px 40px 10px 15px; /* espace pour l'icône à droite */ /* Ombre portée */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Curseur pointeur */ cursor: pointer; /* Typographie */ font-weight: bold; color: #000; /* Position relative pour positionner l'icône */ position: relative; list-style: none; /* supprime la flèche par défaut */ } /* Icône triangulaire à droite (flèche) */ summary::after { content: ''; position: absolute; top: 50%; right: 15px; transform: translateY(-50%) rotate(0deg); width: 0; height: 0; border-left: 7.5px solid transparent; border-right: 7.5px solid transparent; border-top: 10px solid black; /* triangle noir vers le haut */ transition: transform 0.3s ease; } /* Rotation de l'icône quand ouvert */ details[open] summary::after { transform: translateY(-50%) rotate(180deg); /* triangle vers le bas */ } /* Animation d'ouverture/fermeture */ details > * { transition: all 0.3s ease; } /* Contenu de l'accordéon */ details div { padding: 15px; background-color: #fff; border-top: 1px solid #eee; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } details p { padding: 15px 10px 0px 10px ; font-size: 105%; color: blue; } /* Effet d'animation d'apparition du contenu */ details div { overflow: hidden; max-height: 0; opacity: 0; } details[open] div { max-height: 200px; /* ajuste selon besoin */ opacity: 1; } /*<div class="accordion">*/ /* ************* / Accordions-4.css ******************** */ /* ************* List_inline_2.css ******************** */ /* Fil d'ariane */ .breadcrumb-list2 { font-size: 1.2rem; word-break: break-all; line-height: 1.1; padding: 10px 15px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: #eff3ed; max-width: 90%; margin: 0 auto; /* Centre le bloc dans son conteneur parent */ box-shadow: 0 3px 6px rgba(7, 0, 0, 0.4); border: 1px solid #ddd; border-radius: 8px; } .breadcrumb-centrer { display: flex; justify-content: center; } .breadcrumb a { text-decoration: none; color: #3498db; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb-separator { color: #999; } /* Tablette (portrait et paysage) */ @media (max-width: 1024px) { .breadcrumb-list2 { font-size: 1.2rem; max-width: 95%; padding: 8px 12px; gap: 8px; } } /* Téléphone (portrait) */ @media (max-width: 768px) { .breadcrumb-list2 { font-size: 0.9rem; max-width: 98%; padding: 6px 10px; gap: 6px; } } /* Très petits écrans (ex: iPhone 5/SE) */ @media (max-width: 375px) { .breadcrumb-list2 { font-size: 0.85rem; padding: 5px 8px; gap: 5px; } } /*<nav class="breadcrumb-list2"><a href="#accueil"><span class="icon-loupe">🔍</span>Accueil</a><span class="breadcrumb-separator">|</span><a href="#services"><span class="icon-loupe">🔍</span>Services</a><span class="breadcrumb-separator">|</span><span><span class="icon-loupe">🔍</span>Page actuelle</span></nav>*/ /* ************* / List_inline_2.css ******************** */